:root {
  /* 
  --sun-primary-color: #fff;
  --night-primary-color: #100c2a; 
  */
  --primary-color: #695cfe;
  --text-normal-color: #595959;
  --text-sidebar-color: #595959;
  --text-sidebar-hover-color: #fff;
  --bg-primary-color: #fff;
  --bg-secondary-color: #f5f5f5;
  --history-color: #fff;
  --tag-bg-color: ;
  --tran-01: all 0.5s ease;
  --tran-04: all 0.3s ease;
  --tran-05: all 0.3s ease;

  --mode-primary-color: #fff;
  --switch-bg-color: #f6f5ff;
  --switch-bar-color: #ddd;
  --switch-color: #fff;
  --title-text-color: #000;
}
.layout.dark {
  --bg-primary-color: #100c2a;
  --bg-secondary-color: #3a3b3c;
  --history-color: #17113a;
  --text-normal-color: #fff;
  --text-sidebar-color: #fff;
  --text-sidebar-hover-color: #fff;
  
  --mode-primary-color: #000;
  --switch-bg-color: #3c3c3c;
  --switch-bar-color: #fff;
  --switch-color: #000;
  --title-text-color: #fff;
  
  transition: var(--tran-01);
}

.count-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.my-chart {
width: 100%;
height: 100%;
overflow: hidden;
}


.layout.dark .mode-change .switch .bar::after {
  left: 22px;
}
.container {
  width: 100%;
  height: 100%;
}

.float-right {
  float: right;
}

.flex-row{
  display: flex;
}

.card {
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--text-normal-color);
  background-color: var(--bg-primary-color);
  transition: var(--tran-01);
  box-shadow: 0 2px 12px 0px rgba(0, 0, 0, .1);
}

.flex-col-1{
  max-width: calc(4.16667 * 1%);
  flex: 0 0 calc(4.16667 * 1%);
}
.flex-col-2{
  max-width: calc(4.16667 * 2%);
  flex: 0 0 calc(4.16667 * 2%);
}
.flex-col-3{
  max-width: calc(4.16667 * 3%);
  flex: 0 0 calc(4.16667 * 3%);
}
.flex-col-4{
  max-width: calc(4.16667 * 4%);
  flex: 0 0 calc(4.16667 * 4%);
}
.flex-col-5{
  max-width: calc(4.16667 * 5%);
  flex: 0 0 calc(4.16667 * 5%);
}
.flex-col-6{
  max-width: calc(4.16667 * 6%);
  flex: 0 0 calc(4.16667 * 6%);
}
.flex-col-7{
  max-width: calc(4.16667 * 7%);
  flex: 0 0 calc(4.16667 * 7%);
}
.flex-col-8{
  max-width: calc(4.16667 * 8%);
  flex: 0 0 calc(4.16667 * 8%);
}
.flex-col-9{
  max-width: calc(4.16667 * 9%);
  flex: 0 0 calc(4.16667 * 9%);
}
.flex-col-10{
  max-width: calc(4.16667 * 10%);
  flex: 0 0 calc(4.16667 * 10%);
}
.flex-col-11{
  max-width: calc(4.16667 * 11%);
  flex: 0 0 calc(4.16667 * 11%);
}
.flex-col-12{
  max-width: calc(4.16667 * 12%);
  flex: 0 0 calc(4.16667 * 12%);
}
.flex-col-13{
  max-width: calc(4.16667 * 13%);
  flex: 0 0 calc(4.16667 * 13%);
}
.flex-col-14{
  max-width: calc(4.16667 * 14%);
  flex: 0 0 calc(4.16667 * 14%);
}
.flex-col-15{
  max-width: calc(4.16667 * 15%);
  flex: 0 0 calc(4.16667 * 15%);
}
.flex-col-16{
  max-width: calc(4.16667 * 16%);
  flex: 0 0 calc(4.16667 * 16%);
}
.flex-col-17{
  max-width: calc(4.16667 * 17%);
  flex: 0 0 calc(4.16667 * 17%);
}
.flex-col-18{
  max-width: calc(4.16667 * 18%);
  flex: 0 0 calc(4.16667 * 18%);
}
.flex-col-19{
  max-width: calc(4.16667 * 19%);
  flex: 0 0 calc(4.16667 * 19%);
}
.flex-col-20{
  max-width: calc(4.16667 * 20%);
  flex: 0 0 calc(4.16667 * 20%);
}
.flex-col-21{
  max-width: calc(4.16667 * 21%);
  flex: 0 0 calc(4.16667 * 21%);
}
.flex-col-22{
  max-width: calc(4.16667 * 22%);
  flex: 0 0 calc(4.16667 * 22%);
}
.flex-col-23{
  max-width: calc(4.16667 * 23%);
  flex: 0 0 calc(4.16667 * 23%);
}
.flex-col-24{
  max-width: calc(4.16667 * 24%);
  flex: 0 0 calc(4.16667 * 24%);
}

@media screen and (max-width: 1200px) {
  .flex-col-6 {
    max-width: calc(4.16667 * 12%);
    flex: 0 0 calc(4.16667 * 12%);
  }
  .flex-col-8 {
    max-width: calc(4.16667 * 12%);
    flex: 0 0 calc(4.16667 * 12%);
  }
  .flex-col-16 {
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
  }
}

@media screen and (max-width: 1024px) {
  .flex-col-6 {
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
  }
  .flex-col-8 {
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
  }
  .flex-col-20 {
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
  }
  .flex-col-4.chat-type-wrap {
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
  }
  .chat-type {
    display: flex;
  }
  .chat-type .type {
    flex-grow: 1;
  }
  .chat-type .type:not(:last-child) {
    margin-right: 10px;
  }
  .reply-item .item-left {
    display: none !important;
  } 
  .reply-item .item-middle {
    margin-bottom: 10px;
  }
  .reply-box .reply-left {
    display: none;
  }
  .reply-box .center-box {
    margin-left: 0 !important;
  }
  .love-item .item-left {
    display: none !important;
  } 
  .love-item .item-middle {
    margin-bottom: 10px;
  }
  .el-aside {
    /* display: none; */
    /* left: -200px !important; */
  }
  .el-container {
    /* margin-left: 0 !important; */
  }
}

@media screen and (max-width: 900px){
  .filter-container .flex-col-3.input-box {
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  .btn-box {
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
  }
}

@media screen and (max-width: 395px) {
  .btn-box .el-button {
    margin-bottom: 10px;
  }
  .btn-box .el-button:last-child {
    margin-left: 0;
  }
}
